<template>
  <view>
    <view class="top">
      <!-- <view class="navbar" :style="{ height: navBarHeight + 'px' }"
        ><text style="font-size: 36upx">职位</text></view
      > -->
      <image
        src="https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/%E7%BB%84%201042.png"
        mode=""
      ></image>
      <view class="search">
        <view class="search-input">
          <text class="iconfont icon-sousuo"></text>
          <input class="text-normal" type="text" v-model="searchValue" />
        </view>
        <view class="btn-cancel" @click="searchInput">搜索</view>
      </view>
      <yzbfilterDropdown
        :menuTop="0"
        :filterData="filterData"
        :defaultSelected="defaultSelected"
        :updateMenuName="true"
        @confirm="confirm"
        dataFormat="Object"
        ref="filter"
      ></yzbfilterDropdown>
    </view>
    <view class="body">
      <template>
        <m-position
          listType="0"
          :positions="list"
          @click="positionDetail"
          :isAuth="isAuth"
        ></m-position>
      </template>
      <view class="load-more-box">
        <uni-load-more
          v-if="status == '请求中'"
          status="正在加载..."
          :showIcon="true"
        ></uni-load-more>
        <uni-load-more
          v-if="status == '没有更多'"
          status="没有更多了"
          :showIcon="false"
        ></uni-load-more>
        <uni-load-more
          v-if="status == '暂无数据'"
          status="暂无数据"
          :showIcon="false"
        ></uni-load-more>
        <uni-load-more
          v-if="status == '请求失败'"
          status="加载失败，点我重试"
          :showIcon="false"
          @click="reLoad"
        ></uni-load-more>
      </view>
    </view>
	<chuizi-tabbar :current-page="1"></chuizi-tabbar>
  </view>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex';
import mPosition from '@/components/yzb/yzb-bbb.vue';
import yzbfilterDropdown from '@/components/yzb/yzb-filterDropdown.vue';
export default {
  components: {
    mPosition,
    yzbfilterDropdown,
  },
  computed: {
    ...mapState(['userInfo']),
    ...mapGetters(['hasLogin']),
  },
  data() {
    return {
      statusBarHeight: 0,
      navBarHeight: 0,
      topHeight: 0,
      defaultSelected: [],
      list: [],
      status: '',
      isAuth: true,
      query: {
        current: 1,
        number: 20,
        type: 2,
        keyword: '',
        mode: '',
        sex: '',
        money: '',
      },

      indexArr: '',
      valueArr: '',

      searchValue: '',
      placeholder: '请输入岗位名称搜索',
      filterData: [
        {
          name: '性别',
          type: 'hierarchy',
          child: [
            {
              name: '不限',
              id: '',
            },
            {
              name: '男',
              id: '男',
            },
            {
              name: '女',
              id: '女',
            },
          ],
        },
        {
          name: '帮助方式',
          type: 'hierarchy',
          child: [
            {
              name: '不限',
              id: '',
            },
            {
              name: '线上',
              id: '线上',
            },
            {
              name: '线下',
              id: '线下',
            },
          ],
        },
        {
          name: '报酬',
          type: 'hierarchy',
          child: [
            {
              name: '不限',
              id: '',
            },
            {
              name: '正序',
              id: 0,
            },
            {
              name: '倒序',
              id: 1,
            },
          ],
        },
      ],
    };
  },
  created() {
    //获取手机状态栏高度
    this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
    //#ifdef MP-WEIXIN
    this.navBarHeight = uni.getMenuButtonBoundingClientRect().bottom;
    this.topHeight = this.navBarHeight + uni.upx2px(80);
    //#endif
  },

  onLoad(options) {
    this.locationAuth();
  },
  onShow() {
    this.locationAuth();
  },

  onPullDownRefresh() {
    this.query.current = 1;
    this.getDatasByLoc();
  },

  onReachBottom() {
    if (this.status != '没有更多') this.getDatasByLoc('add');
  },

  methods: {
    //需要位置信息的
    getDatasByLoc(type = 'refresh', pulldown = false) {
      if (this.location) {
        this.query.latitude = this.location.latitude;
        this.query.longitude = this.location.longitude;
      }
      this.getPositionList(type, pulldown);
    },
    confirm(indexArr) {
      console.log('122121', indexArr);

      this.query.sex = indexArr.value[0][0]; //性别
      this.query.mode = indexArr.value[1][0]; //方式
      this.query.money = indexArr.value[2][0]; //排序方式

      this.getPositionList();
    },

    async getPositionList(type = 'refresh', pulldown = false) {
      this.status = '请求中';
      if (type == 'refresh') {
        this.query.current = 1;
      } else {
        this.query.current++;
      }

      let data = await this.$apis.getBbbList(this.query);

      if (data) {
        if (type == 'refresh') {
          this.list = [];
        }
        if (pulldown) {
          uni.stopPullDownRefresh();
        }
        this.list = this.list.concat(data || []);
        this.changeStatus(data);
      }
    },

    // 修改请求状态
    changeStatus(data) {
      if (this.list.length === 0) {
        this.status = '暂无数据';
      } else if (this.query.number > data.length) {
        this.status = '没有更多';
      } else {
        this.status = '请求更多';
      }
    },

    positionDetail(item) {
      this.$mRouter.push({
        route: this.$mRoutesConfig.positionDetail,
        query: {
          id: item.id,
        },
      });
    },

    searchInput(e) {
      console.log('searchInput', this.searchValue);
      this.query.placeholder = this.searchValue;
      this.getPositionList();
      if (this.searchValue) {
        this.query.keyword = this.searchValue;
        this.query.page = 1;
        this.list = [];
      } else {
        this.cancelSearch();
      }
    },
    // 取消搜索
    cancelSearch() {
      //this.$refs.filter.initMenu();
      this.searchValue = '';
      this.query.keyword = '';
      //this.query.wayModel='';
      this.query.page = 1;
      this.list = [];
      this.getPositionList();
    },
    /**
     * 位置授权
     */
    locationAuth() {
      let that = this;
      uni.getSetting({
        success(res) {
          if (res.authSetting['scope.userLocation']) {
            console.log('userLocation位置功能已授权');
            that.isAuth = false;
            that.getPosition();
            // 如果已授权,直接获取对应参数
          } else if (!res.authSetting['scope.userLocation']) {
            // 说明此时要获取的位置功能尚未授权,
            // 则设置进入页面时主动弹出，直接授权
            that.isAuth = true;
            that.getDatasByLoc();
          }
        },
        fail() {
          console.log('获取授权信息授权失败');
        },
      });
    }, //获取定位信息
    getAuth() {
      let that = this;
      uni.authorize({
        scope: 'scope.userLocation',
        success(res) {
          // 授权成功
          console.log(res);
          that.getPosition();
          // 成功后获取对应的位置参数
        },
        fail() {
          console.log('位置授权失败');
          uni.showModal({
            content: '检测到您没打开获取信息功能权限，是否去设置打开？',
            confirmText: '确认',
            cancelText: '取消',
            success: (res) => {
              console.log(res);
              if (res.confirm) {
                uni.openSetting({
                  success: (res) => {
                    console.log('res', res);
                    that.getPosition();
                  },
                  fail: (err) => {
                    console.log(err);
                  },
                });
              } else {
                console.log('取消');
              }
            },
          });
        },
      });
    },
    getPosition() {
      console.log('=========获取定位信息========================');
      const that = this;
      uni.getLocation({
        type: 'wgs84',
        success: function (lb) {
          that.location = {
            latitude: lb.latitude,
            longitude: lb.longitude,
          };
          getApp().globalData.location = that.location;
          getApp().globalData.currentLocation = JSON.parse(
            JSON.stringify(that.location)
          );
          //保存到本地
          that.$db.set('location', that.location);
          that.getDatasByLoc();
        },
        fail: function (error) {
          console.log('=======error=========', error);
          that.getDatasByLoc();
        },
      });
    },
  },
};
</script>
<style lang="scss">
.top {
  width: 100%;
  // height: 180upx;
  //position: fixed;
  top: 0;
  z-index: 999;
  //display: flex;
  //flex-direction: column;
  image {
    z-index: -1;
    width: 100%;
    position: fixed;
    top: 0;
  }
  .navbar {
    height: 100upx;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text {
      color: #000;
      font-weight: bolder;
    }
  }
}

.search {
  width: 100%;
  display: flex;
  height: 90upx;
  z-index: 999;
  flex-direction: row;
  color: $font-color-999;
  align-items: center;
  justify-content: center;
  .icon-sousuo {
    color: $font-color-999;
    font-size: $uni-font-size-base;
    margin: 0 15upx;
  }
  .search-input {
    width: 77%;
    height: 65upx;
    border-radius: 50upx;
    display: flex;
    flex-direction: row;
    background-color: #ffffff;
    align-items: center;
  }
  .search-input image {
    width: 35upx;
    height: 35upx;
    margin-right: 10upx;
  }
  .search-input input {
    width: 65%;
    font-size: 28upx;
    color: $font-color-333;
  }

  .btn-search {
    margin-left: 20upx;
  }

  .btn-cancel {
    margin-left: 20upx;
  }
}
</style>
